<template>
  <van-nav-bar title="购物车" />
  <div v-for="item in arr" :key="item.goods_id">
    <van-swipe-cell>
      <van-checkbox
        v-model="item.is_select"
        checked-color="#ff5000"
        @click="change(item)"
      ></van-checkbox>
      <van-card
        :num="item.cart_number"
        :price="Math.ceil(item.cart_number * item.current_price)"
        :desc="item.category"
        :title="item.title"
        :thumb="item.img_small_logo"
        :thumb-link="todetail(item)"
      />

      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delehand(item)"
        />
      </template>
      <div class="btnbox">
        <van-button type="primary" plain class="vanbtn" @click="add(item)">+</van-button>
        <van-button type="primary" plain class="vanbtn" @click="start(item)">-</van-button>
      </div>
    </van-swipe-cell>

    <!-- </van-card> -->
    <van-submit-bar :price="totalprice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allchecked" checked-color="#ff5000" @click="totalall()"
        >全选</van-checkbox
      >

      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink" style="color: red">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { adioreq, allradioreq, cartreq, numreq, payreq, removereq } from '../../api/requies'

export default {
  computed: {
    totalprice() {
      return this.arr.reduce((total, item) => {
        if (item.is_select == true) {
          return total + item.current_price * item.cart_number * 100
        } else {
          return total
        }
      }, 0)
    },
    allchecked() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return (this.checked = this.arr.every((v) => v.is_select == true))
    }
  },
  methods: {
    onSubmit() {
      const id = localStorage.getItem('id')
      payreq(id).then((r) => {
        console.log(r.data)
        // eslint-disable-next-line no-undef
        showSuccessToast(r.data.message)
      })
    },
    onClickLink() {
      this.$router.push('/link')
    },
    totalall() {
      const id = JSON.parse(localStorage.getItem('id'))
      console.log(this.allchecked)
      const a = !this.allchecked ? 1 : 0
      allradioreq(id, a).then((r) => {
        console.log(r.data)

        this.loadlist()
      })
      // this.arr.forEach((v) => (v.is_select = !this.checked))
    },
    delehand(item) {
      const id = JSON.parse(localStorage.getItem('id'))

      removereq(id, item.goods_id).then((r) => {
        console.log(r.data)
        if (r.data.code == 1) {
          // eslint-disable-next-line no-undef
          showSuccessToast(r.data.message)
          this.loadlist()
        }
      })
    },
    add(item) {
      const id = JSON.parse(localStorage.getItem('id'))
      numreq(id, item.goods_id, item.cart_number + 1).then((r) => {
        console.log(r.data)

        this.loadlist()
      })
    },
    start(item) {
      const id = JSON.parse(localStorage.getItem('id'))
      if (item.cart_number <= 1) {
        // eslint-disable-next-line no-undef
        showFailToast('数量不能小于1喔')
      } else {
        numreq(id, item.goods_id, item.cart_number - 1).then((r) => {
          console.log(r.data)

          this.loadlist()
        })
      }
    },
    change(item) {
      const id = JSON.parse(localStorage.getItem('id'))
      adioreq(id, item.goods_id).then((r) => {
        console.log(r.data)
      })
    },
    todetail(item) {
      const goodsId = item.goods_id
      if (!goodsId) {
        console.error('商品 ID 无效')
      }
      return `/detail?id=${goodsId}`
    },
    loadlist() {
      const id = JSON.parse(localStorage.getItem('id'))
      cartreq(id).then((r) => {
        this.arr = r.data.cart
      })
    }
  },
  data() {
    return {
      arr: [],
      checked: false
    }
  },
  mounted() {
    this.loadlist()
  }
}
</script>
<style lang="scss">
.vanbtn {
  width: 100px;
  height: 30px;
  font-size: 25px;
}
.btnbox {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 10px;
}
.delete-button {
  width: 100%;
  height: 100%;
}
.button {
  font-size: 25px;
}

.van-submit-bar {
  bottom: 50px;
}
.van-card__footer {
  display: flex;
  justify-content: space-between;
}
</style>
